<template>
  <el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false" @select="handleSelect">
    <el-menu-item 
      v-for="item in fixedMenus" 
      :key="item.key" 
      :style="{ '--theme': theme }" 
      :index="item.key"
    >
      <svg-icon v-if="item.icon" :icon-class="item.icon" />
      {{ item.title }}
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app';
import { useSettingsStore } from '@/store/modules/settings';
import { usePermissionStore } from '@/store/modules/permission';

// 固定的顶部菜单配置
const fixedMenus = [
  {
    key: 'dashboard',
    title: '矩阵驾驶舱',
    icon: 'dashboard'
  },
  {
    key: 'matrix',
    title: '矩阵业务',
    icon: 'system'
  },
  {
    key: 'iot',
    title: '物联网平台管理',
    icon: 'monitor'
  }
];

const appStore = useAppStore();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
const route = useRoute();
const router = useRouter();

// 主题颜色
const theme = computed(() => settingsStore.theme);

// 默认激活的菜单 - 默认激活物联网平台管理系统
const activeMenu = ref('iot');

// 发送菜单切换事件
const emit = defineEmits(['nav-change']);

// 初始化时设置默认激活菜单
onMounted(() => {
  emit('nav-change', 'iot');
  // 确保侧边栏显示并设置IOT菜单
  appStore.toggleSideBarHide(false);
  permissionStore.setIotRoutes();
});

const handleSelect = (key: string) => {
  activeMenu.value = key;
  // 发送菜单切换事件给父组件
  emit('nav-change', key);
  
  // 根据选择的菜单模块进行相应处理
  if (key === 'matrix') {
    // 矩阵业务系统 - 显示侧边栏并设置矩阵菜单
    appStore.toggleSideBarHide(false);
    permissionStore.setMatrixRoutes();
    // 如果当前不在矩阵路由下，跳转到矩阵业务系统首页
    if (!route.path.startsWith('/matrix')) {
      router.push('/matrix/index');
    }
  } else if (key === 'iot') {
    // 物联网平台管理系统 - 显示侧边栏并设置IOT菜单
    appStore.toggleSideBarHide(false);
    permissionStore.setIotRoutes();
    if (!route.path.startsWith('/iot')) {
      router.push('/iot/home');
    }
  } else if (key === 'dashboard') {
    // 矩阵驾驶舱演示系统 - 跳转到首页
    router.push('/dashboard');
    appStore.toggleSideBarHide(true);
  }
};
</script>

<style lang="scss">
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
  border-bottom: 2px solid #{'var(--theme)'} !important;
  color: #303133;
}

/* sub-menu item */
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

/* 背景色隐藏 */
.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.topmenu-container.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: #ffffff !important;
}

/* 图标右间距 */
.topmenu-container .svg-icon {
  margin-right: 4px;
}
</style>
